<template>
  <div class="keyboard-shortcuts-demo">
    <h2>键盘快捷键示例</h2>

    <!-- 示例1: 基本使用 -->
    <section class="demo-section">
      <h3>基本使用</h3>
      <div class="demo-box">
        <p>尝试按下: <code>Ctrl + S 保存</code> 或 <code>Ctrl + C 复制</code></p>
        <KeyboardShortcuts
            :shortcuts="[
            { keys: 'Ctrl + S', action: 'save' },
            { keys: 'Ctrl + C', action: 'copy' }
          ]"
            @shortcut-triggered="handleShortcut"
        >
          <div class="action-log">最后执行的操作: {{ lastAction }}</div>
        </KeyboardShortcuts>
      </div>
    </section>

    <!-- 示例2: 带回调函数 -->
    <section class="demo-section">
      <h3>带回调函数</h3>
      <div class="demo-box">
        <p>尝试按下: <code>Ctrl + K</code></p>
        <KeyboardShortcuts
            :shortcuts="[{
            keys: 'Ctrl + K',
            action: () => openSearch()
          }]"
        >
          <div class="search-box" v-if="isSearchOpen">
            搜索框已打开
            <button @click="isSearchOpen = false">关闭</button>
          </div>
        </KeyboardShortcuts>
      </div>
    </section>

    <!-- 示例3: 非全局作用域 -->
    <section class="demo-section">
      <h3>非全局作用域</h3>
      <div class="demo-box">
        <p>在输入框内按 <code>Enter</code></p>
        <KeyboardShortcuts
            :global="false"
            :shortcuts="[{ keys: 'Enter', action: 'submit' }]"
            @shortcut-triggered="handleSubmit"
        >
          <input
              type="text"
              v-model="inputText"
              placeholder="Focus here to use Enter shortcut"
              class="demo-input"
          >
          <div class="action-log">{{ submitMessage }}</div>
        </KeyboardShortcuts>
      </div>
    </section>

    <!-- 示例4: 自定义分隔符 -->
    <section class="demo-section">
      <h3>自定义分隔符</h3>
      <div class="demo-box">
        <p>尝试按下: <code>Ctrl-Alt-D</code></p>
        <KeyboardShortcuts
            separator="-"
            :shortcuts="[{ keys: 'Ctrl-Alt-D', action: 'debug' }]"
            @shortcut-triggered="handleDebug"
        >
          <div class="action-log">{{ debugStatus }}</div>
        </KeyboardShortcuts>
      </div>
    </section>

    <!-- 示例5: 复杂组合 -->
    <section class="demo-section">
      <h3>复杂组合</h3>
      <div class="demo-box">
        <p>尝试按下: <code>Shift + Ctrl + Tab</code> 或 <code>Ctrl + Tab</code></p>
        <KeyboardShortcuts
            :modifier-sensitive="true"
            :shortcuts="[
            { keys: 'Shift + Ctrl + Tab', action: 'prevTab' },
            { keys: 'Ctrl + Tab', action: 'nextTab' }
          ]"
            @shortcut-triggered="handleTabSwitch"
        >
          <div class="tabs-demo">
            当前标签页: {{ currentTab }}
          </div>
        </KeyboardShortcuts>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import KeyboardShortcuts from '@/components/KeyboardShortcuts/KeyboardShortcuts.vue'

// 状态变量
const lastAction = ref('')
const isSearchOpen = ref(false)
const inputText = ref('')
const submitMessage = ref('')
const debugStatus = ref('')
const currentTab = ref(1)

// 事件处理函数
const handleShortcut = (event) => {
  lastAction.value = `执行了 ${event.action} 操作`
}

const openSearch = () => {
  isSearchOpen.value = true
}

const handleSubmit = () => {
  submitMessage.value = `提交的内容: ${inputText.value}`
  inputText.value = ''
}

const handleDebug = () => {
  debugStatus.value = '调试模式已' + (debugStatus.value.includes('开启') ? '关闭' : '开启')
}

const handleTabSwitch = (event) => {
  if (event.action === 'nextTab') {
    currentTab.value = currentTab.value >= 3 ? 1 : currentTab.value + 1
  } else {
    currentTab.value = currentTab.value <= 1 ? 3 : currentTab.value - 1
  }
}
</script>

<style scoped>
.keyboard-shortcuts-demo {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

h2 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
}

.demo-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background: white;
}

h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.demo-box {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
}

code {
  background: #e9ecef;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

.action-log {
  margin-top: 10px;
  padding: 10px;
  background: #e9ecef;
  border-radius: 4px;
  font-size: 14px;
}

.demo-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-top: 10px;
}

.search-box {
  margin-top: 10px;
  padding: 10px;
  background: #e9ecef;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-box button {
  padding: 4px 8px;
  border: none;
  background: #409eff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.tabs-demo {
  margin-top: 10px;
  padding: 10px;
  background: #e9ecef;
  border-radius: 4px;
  text-align: center;
}
</style>